<script setup>
import { ref, watch } from "vue";
let props = defineProps({
    id: {
        type: String,
        default: "",
    },
    color: {
        type: String,
        default: "dark",
    },
    inputClass: {
        type: String,
        default: "",
    },
    labelClass: {
        type: String,
        default: "",
    },
    checked: {
        type: Boolean,
        default: false,
    },
    modelValue: String,
});
let emits = defineEmits(["update:modelValue"]);
const inputData = ref(props.modelValue);
const changeVal = (e) => {
    emits("update:modelValue", e.target.checked);
};
</script>
<template>
    <div class="form-check" style="padding-left: 0">
        <input class="form-check-input" :class="`border-${color} ${inputClass}`" type="checkbox" v-model="inputData" :value="id" :checked="checked" @input="changeVal" :id="id" />
        <label class="form-check-label" :class="labelClass" :for="id">
            <slot />
        </label>
    </div>
</template>
